<template>
  <a-form :form='form' v-bind='formLayout' >
    <a-form-item label='工单编号'>
      <a-input v-decorator='["workorderNo"]' disabled />
    </a-form-item>
    <a-form-item label='工单描述'>
      <a-textarea v-decorator='["description"]' :auto-size='{minRows: 3}' disabled />
    </a-form-item>
    <a-form-item label='发起人'>
      <a-input v-decorator='["createdUser"]' disabled />
    </a-form-item>
    <a-form-item label='工单类型'>
      <a-select disabled
                v-decorator="[
              'type',
              { rules: [{ required: true, message: '请选择设备类型!' }] },
            ]">
        <a-select-option value='0'>类型1</a-select-option>
        <a-select-option value='1'>类型2</a-select-option>
        <a-select-option value='2'>类型3</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label='站点'>
      <a-input v-decorator='["station"]' disabled />
    </a-form-item>
    <a-form-item label='设备'>
      <a-input v-decorator='["deviceName"]' disabled />
    </a-form-item>
    <a-form-item label='图片'>
      <img :src=this.model.photoName style='width: 100px; height: 100px'/>
    </a-form-item>
    <a-form-item label='期望完成时间'>
      <a-input v-decorator='["expectedCompletionTime"]' disabled />
    </a-form-item>
    <a-form-item label='备注'>
      <a-textarea v-decorator='["remark"]' :auto-size='{minRows: 3}' disabled />
    </a-form-item>
  </a-form>
</template>

<script>
import pick from 'lodash.pick'
import { findDataDicInfoByType } from '@/api/dataDicInfo'

// 表单字段
const fields = ['deviceName', 'type', 'station', 'createdUser','workorderNo','description','deviceId']

export default {
  props: {
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
    return {
      form: this.$form.createForm(this),
      stationList:[]
    }
  },
  computed:{
  },
  created() {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    console.log(1, 'this.1')
    // 当 model 发生改变时，为表单设置值
    if(this.model){
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    }
    this.$watch('model', () => {
      console.log(this.model, 'this.model2')
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
      this.getStationList()
  },
  methods:{
    getStationList () {
      findDataDicInfoByType(13).then(res => {
        console.log(res)
        this.stationList = res.map(item => {
          return {
            ...item,
            key: item.code,
            label: item.name
          }
        })
      })
    },
  }
}
</script>


<style lang='less' scoped>

</style>